<template>
  <section class="component add-garage">
    <el-form
      :model="dataForm"
      :rules="rules"
      ref="modify-form"
      label-width="100px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="车库编号：" prop="garageCode">
            <el-input v-model="dataForm.garageCode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车库名称：" prop="garageName">
            <el-input v-model="dataForm.garageName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="车库地址：" prop="areaIds">
            <el-cascader
              v-model="dataForm.areaIds"
              :options="$city.getCityData()"
              change-on-select
              clearable
            ></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="30px" prop="addressDetail">
            <el-input
              v-model="dataForm.addressDetail"
              placeholder="请输入详细地址"
              style="width:83%"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="联系人：" prop="contactName">
            <el-input v-model="dataForm.contactName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话：" prop="contactPhone">
            <el-input
              v-model="dataForm.contactPhone"
              :maxlength="11"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="车库面积：" prop="garageArea">
            <el-input v-model="dataForm.garageArea">
              <template slot="append">平方米</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态：" prop="commonState">
            <el-select
              v-model="dataForm.commonState"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="{ index, name, code } in $dict.getDictData(
                  'CommonState'
                )"
                :key="index"
                :label="name"
                :value="code"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item :span="20" label="库管员：" prop="userIds">
        <el-select
          v-model="dataForm.userIds"
          size="medium"
          placeholder="请选择库管员"
          multiple
          collapse-tags
          class="select-role"
        >
          <el-option
            v-for="item in userList"
            :key="item.id"
            :label="item.realName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注：" prop="remark">
        <el-input
          type="textarea"
          v-model="dataForm.remark"
          style="width:93%"
          maxlength="200"
          show-word-limit
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="operate-buttons">
      <el-button @click="close">取消</el-button>
      <el-button @click="commit">确定</el-button>
    </div>
  </section>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { UserService } from "~/services/management-service/user.service";
import { Emit } from "vue-property-decorator";
import { CarManageService } from "~/services/domain-service/car-manage.service";

@Component({
  components: {}
})
export default class AddGarage extends Vue {
  @Dependencies(CarManageService)
  private carManageService: CarManageService;
  @Dependencies(UserService)
  private userService: UserService;

  private userList = [];
  private dataForm: any = {
    id: "",
    garageCode: "",
    garageName: "",
    areaIds: [],
    addressDetail: "",
    contactName: "",
    contactPhone: "",
    garageArea: "",
    userIds: [],
    commonState: "",
    remark: ""
  };
  private rules: any = {
    garageCode: { required: true, message: "请输入车库编号" },
    garageName: { required: true, message: "请输入车库名称" },
    areaIds: { required: true, type: "array", message: "请选择车库地址" },
    addressDetail: { required: true, message: "请输入详细地址" },
    contactName: { required: true, message: "请输入联系人" },
    contactPhone: [
      { required: true, message: "请输入联系电话" },
      { validator: this.$validator.phoneNumber, trigger: "blur" }
    ],
    garageArea: { required: true, message: "请输入车库面积" },
    commonState: { required: true, message: "请选择状态" },
    userIds: { required: true, type: "array", message: "请选择库管员" }
  };

  @Emit("refreshList")
  public refreshList() {}
  @Emit("close")
  private close() {
    this.reset();
  }

  private mounted() {
    this.getAllUserList();
  }

  //重置方法
  private reset() {
    const modifyForm: any = this.$refs["modify-form"];
    this.dataForm.id = "";
    modifyForm.resetFields();
  }

  /**
   * 反显数据
   */
  private update(data: any) {
    if (!data.id) return;
    this.dataForm.id = data.id;
    this.dataForm.garageCode = data.garageCode;
    this.dataForm.garageName = data.garageName;
    this.dataForm.areaId = data.areaId;
    this.dataForm.addressDetail = data.addressDetail;
    this.dataForm.contactName = data.contactName;
    this.dataForm.contactPhone = data.contactPhone;
    this.dataForm.garageArea = data.garageArea;
    this.dataForm.userIds = data.userIds.split(",");
    this.dataForm.realNames = data.realNames;
    this.dataForm.commonState = data.commonState;
    this.dataForm.remark = data.remark;
    const arr = this.$city.getCityParent(Number(data.areaId));
    this.dataForm.areaIds = arr ? arr.concat([Number(data.areaId)]) : [];
  }

  private commit() {
    const modifyForm: any = this.$refs["modify-form"];
    modifyForm.validate(valid => {
      if (!valid) return false;
      this.dataForm.areaId = this.dataForm.areaIds[
        this.dataForm.areaIds.length - 1
      ];
      //根据是否有数据传入决定执行新增还是修改
      this.dataForm.id ? this.updateGrage() : this.addGrage();
      this.close();
    });
  }

  /**
   * 新增车库
   */
  private addGrage() {
    this.carManageService.addGarage(this.dataForm).subscribe(
      data => {
        this.$message.success("新增成功!");
        // 刷新列表
        this.refreshList();
        // 关闭
        this.close();
      },
      ({ msg }) => {}
    );
  }

  /**
   * 修改车库
   */
  private updateGrage() {
    this.carManageService.updateGarage(this.dataForm).subscribe(
      data => {
        this.$message.success("修改成功!");
        // 刷新列表
        this.refreshList();
        //关闭
        this.close();
      },
      ({ msg }) => {}
    );
  }

  // 库管员列表
  private getAllUserList() {
    this.userService
      .getAllUsersList({ userStatus: "ENABLED" })
      .subscribe(data => {
        this.userList = data;
      });
  }
}
</script>
